
angular.module('zixys.domSelector',[])

    .directive('zixysDomSelector', ['selectorTools', function(selectorTools) {

        return {
            restrict: 'C',
            scope: {},
            replace:true,
            template:'<em id="zixys-select-button"><em></em></em>',

            link: function($scope, element, attrs) {
                var $selectedTag, isCtrlDown, hasChosen, selectedNodes = {}, selectors = [];

                $(document).bind('keydown',function(e){
                    if(isCtrlDown) return;
                    //win & mac
                    if (e.keyCode === 17 || e.keyCode === 224 || e.keyCode === 91) {
                        isCtrlDown = true;
                    }
                }).bind('keyup',function(e){
                    //win & mac
                    if (e.keyCode === 17 || e.keyCode === 224 || e.keyCode === 91) {
                        isCtrlDown = false;
                        unbind();
                    }
                })

                function unbind () {
                    if(!$selectedTag) return;
                    element.removeClass('zixys-sbutton-pressed');

                    $selectedTag
                        .removeClass('zixys-hovered-item')
                        .unbind('mouseout.zixys mousedown.zixys click.zixys mouseup.zixys');

                    $(document).unbind('mouseover.zixys');
                }

                function addSelector(node) {
                    var selector = selectorTools.resolveCssSelector(node);
                    if(!selectedNodes[selector]){
                        selectedNodes[selector] = selector;
                        selectors.push( selector );
                    }
                }

                function deploySelectors() {
                    if(selectors.length>0){
                        $scope.$root.$broadcast('nodeSelected',selectors.join(', '));
                    }
                }

                var enableSelector = function(){
                    $(document).bind('mouseover.zixys',function(e){
                        var $this = $(e.target);
                        if($this.closest('#zixys-wrap').length>0){
                            return;
                        };
                        $this
                        .addClass('zixys-hovered-item')
                        .bind('mousedown.zixys mouseup.zixys',function(ev){
                            ev.stopImmediatePropagation();
                            ev.stopPropagation();
                            return false;
                        })
                        .bind('click.zixys',function(ev){
                            if(!$selectedTag && !isCtrlDown){
                                selectedNodes = {};
                                selectors = [];
                            }
                            $selectedTag = $(ev.target);
                            
                            addSelector($selectedTag);
                            if(!isCtrlDown){
                                unbind();
                            }
                            deploySelectors();

                            ev.stopImmediatePropagation();
                            ev.stopPropagation();
                            return false;				
                        })
                        .bind('mouseout.zixys',function(ev){
                            $(ev.target).removeClass('zixys-hovered-item')
                            .unbind('mouseup.zixys mouseout.zixys mousedown.zixys click.zixys');
                        });
				
                    });
                };                
                
                element.bind('click',function(e){
                    if(element.hasClass('zixys-sbutton-pressed')){
                        $(document).unbind('mouseover.zixys');
                        element.removeClass('zixys-sbutton-pressed');
                    }else{
                        //press
                        enableSelector();
                        element.addClass('zixys-sbutton-pressed');
                        $selectedTag = null;
                    }
                });
            }
        }
        
    }])
    
    .run(['$rootScope', function($rootScope){
        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addButton('DOM Inspector','zixys-dom-selector');
        });

    }]);
    
    